<template>
  <div class="page">
    <div class="hint"></div>
    <div class="content">
      <div class="chatBox" ref="chatBox">
        <div class="leftBox" ref="leftBox">
          <div class="addChat" @click="handleClickChat">新建一个对话</div>
          <div class="itemList" ref="itemList">
            <div
              v-for="item in chatList"
              class="item blue"
              :key="item.id"
              @click="handleClickChatDetail(item.chatid)"
              :style="
                nowChat == item.chatid
                  ? 'color:#fff;background-color:rgba(42, 130, 228, 1);'
                  : ''
              "
            >
              <div class="date">{{ item.date }}</div>
              <div class="item-top">
                <img class="img" src="../assets/gptAvatar.svg" alt="icon" />

                <span class="text">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rightBox" ref="rightBox">
          <div v-if="chatDetailList.length == 0" class="empty">
            1.写文案、写论文，写小说、写脚本 <br>
            2.知平百度答题、作业题目<br>
            3.文案润色、翻译、写诗作词 <br>
            4.扮演面试官、扮演书籍电影角色<br>
            5.倾诉、解忧、讲故事...... <br><br>
            你可以这样问: <br>
            例1:写一首摇滚情歌<br>
            例2:写一篇生活短视频脚本 <br>
            例3:写一篇爱情小说
          </div>
          <div
            class="chat"
            :style="{ scrollTop: chatListScrollTop + 'px' }"
            v-for="item in chatDetailList"
            :key="item.id"
            :class="{ user: item.type === 'user', gpt: item.type === 'gpt' }"
            v-if="chatDetailList.length != 0"
          >
            <img
              class="img"
              src="../assets/avater.png"
              alt="头像"
              v-if="item.type === 'user'"
            />
            <img class="img" src="../assets/gptAvatar.svg" alt="头像" v-else />
            <el-tooltip :content="item.date" placement="bottom" effect="light">
              <span class="text">{{ item.content }}</span>
            </el-tooltip>
          </div>
           
        </div>
        <el-form @submit.native.prevent="handleSendInfoSubmit">
            <el-input
              placeholder="在这里输入您的需求（回车发送）"
              class="sendBox"
              :value="sendInfo"
              style="width: 700px;"
              @input="handleSendInfoInput"
            ></el-input>
          </el-form>
      </div>
    </div>
    <div class="add" @click="handleClickChat">
      <img src="../assets/add.png" />
    </div>
  </div>
</template>

<script>
import * as TOOLS_DATE from "@/tools/date";

export default {
  data() {
    return {
      nowChat: 0,
      addChatWidth: 0,
      chatListScrollTop: 0,
      sendInputWidth: 666,
      rightBoxHeight: 666,
      leftBoxHeight: 666,
      sendInfo: "",
      chatId: "",
      chatList: [],
      chatDetailList: [],
    };
  },
  mounted() {
    // this.init();
    this.rightBoxHeight = this.$refs.leftBox.clientHeight - 50;
    this.sendInputWidth = this.$refs.rightBox.clientWidth - 100;
    this.addChatWidth = this.$refs.leftBox.clientWidth;
    window.onresize = () => {
      return (() => {
        this.$nextTick(() => {
          this.addChatWidth = this.$refs.leftBox.clientWidth;
          this.rightBoxHeight = this.$refs.leftBox.clientHeight - 50;
          this.sendInputWidth = this.$refs.rightBox.clientWidth - 100;
        });
      })();
    };
  },
  methods: {
    init() {
      this.getChatList();
    },
    getChatList() {
      const uid = JSON.parse(localStorage.getItem("userInfo")).uid;
      this.$axios.post("/getChatList", { uid }).then((res) => {
        if (res.data.code === 200) {
        
          this.chatList = res.data.data;
        }
      });
    },
    getChatDetailList(chat_id) {
      this.$axios
        .post("/getChat", { chat_id: chat_id.toString() })
        .then((res) => {
          if (res.data.code === 200) {
            const list = Array.from(res.data.data);
            list.forEach((item) => {
              item.date = TOOLS_DATE.translationDateToFormatDate(item.date);
            });
            this.chatDetailList = list;
          }
        });
    },
    handleClickChatDetail(chat_id) {
      this.nowChat = chat_id;
      this.getChatDetailList(chat_id);
    },
    handleSendInfoInput(v) {
      this.sendInfo = v;
    },
    handleSendInfoSubmit() {
      const uid = JSON.parse(localStorage.getItem("userInfo")).uid;
      const item = {
        type: "user",
        content: this.sendInfo,
      };
      this.chatDetailList.push(item);
      const sendInfo = {
        uid,
        chat_id: this.chat_id || "new",
        content: this.sendInfo,
        type: "chat",
      };
      this.$axios.post("/ai", sendInfo).then((res) => {
        
        const item = {
          id: res.data.data.id,
          role: res.data.data.role,
          content: res.data.data.content,
          date: res.data.data.updated_at,
          type: "chat",
        };
        this.chatListScrollTop += 100;
        this.chat_id = res.data.data.chat_id;
        this.chatDetailList.push(item);
      });
      this.sendInfo = "";
    },
    handleClickChat() {
      this.$message.success("新建会话成功");
      this.nowChat = 0;
      this.chat_id = "";
      this.chatDetailList = [];
    },
  },
};
</script>

<style scoped lang="less">
.page {
  padding: 20px 20px 0;
  height: 100%;

  .hint {
    font-weight: 600;
  }

  .bottom {
    margin-top: 15px;
    display: flex;
    height: 5%;
    line-height: 34.8px;
  }

  .content {
    // padding: 15px 0;
    height: 100%;

    .table {
      height: 70vh;
      overflow-y: auto;
    }

    .op {
      color: #2468f2;
    }

    .top {
      margin-top: 3vh;
    }
  }
}

.chatBox {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  padding-right: 15px;
  // padding-top: 10px;
  position: relative;

  .leftBox {
    width: 30%;

    border-right: 1px solid #eee;

    .addChat {
      // width: 50%;
      background-color: #eee;
      margin-right: 20px;
      border-radius: 5px;
      text-align: center;
      padding: 15px 0;
      cursor: pointer;
    }

    .itemList {
      display: flex;
      flex-flow: column;
      transform: translate();
      margin-top: 15px;
      margin-right: 20px;
      .item {
        // height: 50px;
        cursor: pointer;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 15px;
        border-radius: 8px;
        background-color: rgba(42, 130, 228, 0.15);

        .item-top {
          margin-top: 10px;
          display: flex;
          align-items: center;
        }
        .date {
          font-size: 15px;
          color: #00000065;
        }
        .img {
          margin: 5px;
          width: 50px;
          height: 50px;
        }

        .text {
          margin-left: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .rightBox {
    // width: 100%;
    position: fixed;
    left: 40%;
    // overflow: hidden;
    overflow: auto;
    height: 80vh;
    // position: relative;

    .chat {
      min-height: 100px;
      display: flex;

      .img {
        margin-top: 25px;
        margin-left: 15px;
        margin-right: 15px;
        width: 50px;
        height: 50px;
      }

      .text {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-right: 25px;
        line-height: 25px;
        display: flex;
        align-items: center;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }

    .chat {
      //border-bottom: 1px solid black;
    }

    .chat:last-child {
      border: none;
    }

    .user {
    }

    .gpt {
    }

    
  }
}
.sendBox {
      position: fixed;
      bottom: 30px;
      min-height: 50px;
      margin-left: 50px;
      margin-right: 50px;
    }

.empty {
  // width: 500px;
  // margin-right: 50px;
  // text-align: center;
  background-color: #fafafa;
  padding: 30px;
  border-radius: 10px;
  
}
.blue {
  background-color: rgba(42, 130, 228, 0.15);
}
.greed {
  background-color: rgba(48, 184, 156, 0.15);
}
.add {
  cursor: pointer;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 25px;
  right: 25px;
  height: 50px;
  width: 50px;
  text-align: center;
  /* background-color: #30b89c; */
  border-radius: 50%;
  background: #2a82e4;
  box-shadow: 0px 2px 10px 1px rgba(48, 184, 156, 0.25);
}

.add img {
  width: 25px;
  height: 25px;
}
</style>
